<template>
  <div>
    <button @click="loadNewComponent('index')">Load New Component</button>
    <component :is="dynamicComponent" />
  </div>
</template>
  
<script setup>
import { ref, defineAsyncComponent, onMounted, markRaw } from "vue";

// 动态组件引用
const dynamicComponent = ref(null);

// 异步加载组件
const loadNewComponent = addr => {
  dynamicComponent.value = markRaw(
    defineAsyncComponent(() => import(`../test/${addr}.vue`))
  );
};
onMounted(() => {
  loadNewComponent("index1");
});
</script>